<template>
  <a-modal v-model:visible="visible" style="top: 5%" title="详情" width="70vw">
    <template #footer>
      <a-button key="back" @click="handleCancel">关闭</a-button>
    </template>
    <a-row :gutter="[16, 16]">
      <a-col :span="24" style="background-color: #fff; padding: 20px">
        <a-col :span="24">
          <a-row>
            <a-col :md="18" :lg="19">
              <strong class="title">{{ detailData.title }}</strong>
            </a-col>
            <a-col :md="6" :lg="5">
              <a-tag color="pink">pink</a-tag>
              <a-tag color="red">red</a-tag>
              <a-tag color="orange">orange</a-tag>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="24">
          <a-row :gutter="[8, 0]">
            <a-col :md="4" :lg="2">
              <a-image
                :width="50"
                :height="50"
                src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
              ></a-image>
            </a-col>
            <a-col :md="18" :lg="22">
              <a-row :gutter="[8, 8]" style="color: #ccc">
                <a-col :span="24">
                  <strong>作者：xxxxx</strong>
                </a-col>
                <a-col :span="4">{{
                  "平台：" + soureType[detailData.source]
                }}</a-col>
                <a-col :span="6">{{
                  "时间：" +
                  dayjs(detailData.createDate).format("YYYY-MM-DD HH:mm:ss")
                }}</a-col>
                <a-col :span="6">{{
                  "信息分类：" + optineType[detailData.opinionsType]
                }}</a-col>
                <a-col :span="4">有害分类：取治安 </a-col>
                <a-col :span="4">相似猜件: 233</a-col>
              </a-row>
            </a-col>
            <a-col :span="22" :offset="2">
              <span
                style="
                  color: rgb(131 125 125);
                  background-color: rgb(204 204 204 / 26%);
                "
                ><disconnect-outlined />https//mn.umelxn.qg.onm/s/GbpHGSDyaBdt2Y.YsBA</span
              >
            </a-col>
          </a-row>
        </a-col>
      </a-col>
      <a-col :span="24" style="background-color: #fff">
        <div class="top-text">文小</div>
        <a-col style="background-color: #fff; padding: 20px">
          {{ detailData.content }}
        </a-col>
      </a-col>
      <a-col :span="24" style="background-color: #fff">
        <div class="top-text">图文分析</div>
        <a-row :gutter="[32, 32]">
          <a-col :span="24">
            <a-row :gutter="[16, 16]">
              <a-col :span="6">
                <div class="left-img">
                  <a-image :src="detailData.img"></a-image>
                </div>
              </a-col>
              <a-col :span="18">
                <a-row>
                  <a-col :span="24">
                    <div>
                      <div class="left-text">OCR文字</div>
                      <div class="content-box">
                        <div class="content-text">
                          <a-button
                            type="primary"
                            shape="round"
                            style="width: 100%"
                            >《云南换象》演出团以解败</a-button
                          >
                        </div>
                        <div class="content-text">
                          <a-button
                            type="primary"
                            shape="round"
                            style="width: 100%"
                            >舞蹈艺术家杨丽汗宣布</a-button
                          >
                        </div>
                        <div class="content-text">
                          <a-button
                            type="primary"
                            shape="round"
                            style="max-width: 100%"
                            >这是比较长的识别别文字内客，舞蹈艺术激张三星接着这是比较长的识别别文字内客</a-button
                          >
                        </div>
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="24">
                    <div>
                      <div class="left-text">关键赖特征识别</div>
                      <div class="content-box">
                        <div class="content-text">
                          <a-button
                            type="primary"
                            shape="round"
                            style="width: 100%"
                          >
                            人物识别 3
                          </a-button>
                        </div>
                        <div class="content-text">
                          <a-button
                            type="primary"
                            shape="round"
                            style="width: 100%"
                          >
                            有出场景 3
                          </a-button>
                        </div>
                        <div class="content-text">
                          <a-button
                            type="primary"
                            shape="round"
                            style="width: 100%"
                            >有害物品 3</a-button
                          >
                        </div>
                        <div class="content-text">
                          <a-button
                            type="primary"
                            shape="round"
                            style="width: 100%"
                            >票证识别 3</a-button
                          >
                        </div>
                      </div>
                    </div>
                  </a-col>
                </a-row>
                <!-- <div class="tuwen-item"> -->
                <!-- <div class="tuwen-item-right"> -->

                <!-- <div class="tuwen-item-footer"> -->
                <a-row :gutter="[16, 16]">
                  <a-col :span="4">
                    <div>
                      <a-image
                        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                      ></a-image>
                      <div>洪水</div>
                      <a-tag color="cyan">日然夹害</a-tag>
                    </div>
                  </a-col>
                  <a-col :span="4">
                    <div>
                      <a-image
                        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                      ></a-image>
                      <div>洪水</div>
                      <a-tag color="cyan">暴力</a-tag>
                    </div>
                  </a-col>
                  <a-col :span="4">
                    <div>
                      <a-image
                        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                      ></a-image>
                      <div>洪水</div>
                      <a-tag color="cyan">赌博</a-tag>
                    </div>
                  </a-col>
                </a-row>

                <!-- </div> -->
                <!-- </div> -->
                <!-- </div> -->
              </a-col>
            </a-row>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
  </a-modal>
</template>
<script setup>
import { reactive, ref } from "vue";
import dayjs from "dayjs";
const soureType = {
  1: "百度",
  2: "腾讯",
  3: "新浪",
  4: "微博",
  5: "抖音",
};
const optineType = {
  1: "新闻",
  2: "言论",
};
const visible = ref(false);
let detailData = reactive({});
const open = (data) => {
  visible.value = true;
  detailData = data;
};

const handleCancel = () => {
  visible.value = false;
};

defineExpose({
  open,
});
</script>
<style lang="scss" scoped>
.title {
  font-size: 20px;
}

.top-text {
  padding: 20px 20px 8px 20px;
  border-bottom: 1px solid #ccc;
  color: #1890ff;
  margin-bottom: 10px;
}

.left-text {
  position: relative;

  &::before {
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    content: "";
    width: 4px;
    height: 50%;
    background: #1890ff;
  }
}

.content-box {
  display: flex;
  align-items: center;
  overflow: auto;
  // flex-direction: row;
  flex-wrap: wrap;

  & .content-text {
    flex-grow: 1;
    padding: 5px 20px;
    margin: 6px;
  }
}

.tuwen-item {
  display: flex;
  align-content: center;

  &-right {
    margin-left: 30px;
    flex: 1;
  }

  &-footer {
    display: flex;
    align-items: center;

    & > div {
      flex: 1;
    }
  }
}

.ant-back-top {
  bottom: 100px;
}

.ant-back-top-inner {
  height: 40px;
  width: 40px;
  line-height: 40px;
  border-radius: 4px;
  background-color: rgba(124, 132, 238, 0.5);
  color: #fff;
  text-align: center;
  font-size: 20px;
}

.left-img {
  width: 100%;
  height: 100%;
  background: rgb(206, 203, 203, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
